<template>
    <span class="blink" style="display: inline-flex; align-items: center;">
        <svg :width="P.n" :height="P.n" xmlns="http://www.w3.org/2000/svg" :style="`vertical-align: middle; transform: translateY(${P.n * 0.1}px);`">
            <defs> <mask :id="`hole-mask${n}`"> <rect :width="P.n" :height="P.n" fill="white"/>
                <circle :cx="P.n / 2" :cy="P.n / 2" :r="P.n / 5" fill="black"/> </mask>
            </defs>
            <rect :width="P.n" :height="P.n" :rx="P.n / 10" :ry="P.n / 10" :fill="P.color" :mask="`url(#hole-mask${n})`"/>
            <!-- <rect :width="P.n" :height="P.n" :rx="P.n / 5" :ry="P.n / 5" :fill="P.color" mask="url(#hole-mask)"/> --> --> -->
        </svg>
    </span>
</template>

<script setup lang="ts">
 import { reactive, onMounted, onUnmounted } from 'vue'
 const P = defineProps({
     n : {
         type: Number,
         default: 20, // default n
     },
     color : {
         type: String,
         default: 'var(--el-color-primary)', // default color
     },
 });
</script>
